<template>
  <div class="search-city">

    <van-grid :border="false" :clickable="true">
      <!-- 不用拼音-有几个是重复的 -->
      <van-grid-item v-for="item in ResultAgain.small" :key="item.cityId+'resultsmall'"
      @click="selectClicked(item)">
        <span slot="text" :style="{
          backgroundColor: '#f4f4f4',borderRadius: '4px',padding: '0 2px'}"
        >{{item.name}}</span>
      </van-grid-item>
    </van-grid>

    <van-grid :border="false" :clickable="true" column-num="1">
      <!-- 不用拼音-有几个是重复的 -->
      <van-grid-item v-for="item in ResultAgain.big" :key="item.cityId+'resultbig'"
      @click="selectClicked(item)">
        <span slot="text" :style="{
          width: '85vw',
          backgroundColor: '#f4f4f4',borderRadius: '4px',padding: '0 4px'}"
        >{{item.name}}</span>
      </van-grid-item>
    </van-grid>

    <!-- overflow: 'hidden',width: '1rem',henght:'0.5rem', -->
    <!-- 'text-overflow':'ellipsis','display':'-webkit-box','-webkit-box-orient':'vertical','-webkit-line-clamp':1 -->
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import Vue from 'vue'
import { Grid, GridItem } from 'vant'
Vue.use(Grid).use(GridItem);
export default {
  props: ['value'],
  computed: {
    ...mapState('cityModule', ['cities']),
    Result () {
      if (this.cities.length === 0) return
      if (this.value === '') {
        return []
      } else {
        return this.cities.filter(item => {
          return item.name.includes(this.value) || item.pinyin.toUpperCase().includes(this.value) || item.pinyin.toLowerCase().includes(this.value)
        })
      }
    },
    ResultAgain () {
      if (this.cities.length === 0) return
      const letterArr = Array.from(new Set(this.cities.map(item => item.name.length))).sort((a, b) => a - b)
      // [2, 3, 4, 5, 7, 8, 9, 10, 11]

      const manageCities = { small: [], big: [] }
      for (let i = 0; i < letterArr.length; i++) {
        const temparr = this.Result.filter(item => item.name.length === letterArr[i])
        if (letterArr[i] < 5) {
          temparr.length && manageCities.small.push(...temparr)
        } else {
          temparr.length && manageCities.big.push(...temparr)
        }
      }
      return manageCities
    }
  },
  methods: {
    ...mapMutations('cityModule', ['SETCITYNAME', 'SETPOSTCODES', 'SETCITYID']),
    selectClicked (obj) {
      this.SETCITYNAME(obj.name)
      this.SETPOSTCODES(obj.cityId)
      this.SETCITYID(obj.id)
      this.$router.push({ name: 'Home' })
    }
  }
}
</script>

<style lang="scss" scoped>
.search-city {
  margin: 4px 2px;
  height: 90vh;
  overflow-y: auto;
}
</style>
